/*
  学习目标： 模拟插槽
  1. 匿名插槽
  2. 具名插槽
  3. 作用域插槽

*/
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Child>123</Child>
        <Child></Child>
        <ChildName>{{ title: '鹅鹅鹅', list: '曲项向天歌, 白毛浮绿水' }}</ChildName>
        <ChildName>{{ title: '静夜思', list: '床前明野怪, 疑是地上霜' }}</ChildName>
        <ChildScope>
          {(list) => {
            return list.map((item) => <h1 key={item}>{item}</h1>);
          }}
        </ChildScope>
        <ChildScope>{(list) => <i>{list}</i>}</ChildScope>
      </div>
    );
  }
}

class ChildScope extends React.Component {
  state = {
    list: ['橘子', '香蕉', '苹果'],
  };

  render() {
    const { list } = this.state;
    return <div>{this.props.children(list)}</div>;
  }
}

function Child({ children = <h1>我爱React</h1> }) {
  return <div>{children}</div>;
}

function ChildName({ children }) {
  return (
    <div>
      <div className="title">{children.title}</div>
      <div className="list">{children.list}</div>
    </div>
  );
}
